<script setup>
function div1Handler() {
  console.log('这是触发了 inner div 的点击事件')
}

function btnHandler() {
  console.log('这是触发了 btn 按钮 的点击事件')
}

function linkClick() {
  console.log('这是触发了链接的点击事件')
}
</script>

<template>
  <div class="inner" @click="div1Handler">
    <!-- 事件的冒泡传递，从内部一直向外部传递，直到最后 html body -->
    <input type="button" value="点击1" @click="btnHandler">
    <!--  停止事件的冒泡  -->
    <input type="button" value="点击2" @click.stop="btnHandler">
  </div>

  <hr>

  <div class="inner">
    <a href="https://www.baidu.com" v-on:click="linkClick">有问题，百度一下</a>
    <br>
    <!-- 阻止事件的默认行为 -->
    <!-- a 标签的点击会进行跳转， submit 会想服务器提交数据 -->
    <!-- 阻止默认行为并不会影响到事件的处理函数执行 -->
    <a href="https://www.baidu.com" v-on:click.prevent="linkClick">有问题，百度一下</a>
  </div>

  <hr>

  <div class="inner" @click="div1Handler">
    <input type="button" value="点击1" @click="btnHandler">
  </div>

  <br>

  <!--使用事件的捕获模式-->
  <!-- .capture 修饰符调整事件的顺序，从外到内 -->
  <div class="inner" @click.capture="div1Handler">
    <input type="button" value="点击2" @click="btnHandler">
  </div>

  <hr>
  <a href="https://www.baidu.com" v-on:click="linkClick">有问题，百度一下</a>
  <!--阻止默认行为只有效了一次-->
  <a href="https://www.baidu.com" v-on:click.prevent.once="linkClick">有问题，百度一下</a>

  <hr>
  <div class="inner" @click="div1Handler">
    <input type="button" value="点击1" @click="btnHandler">
  </div>

  <br>

  <!--只有event.target是当前操作的元素时才触发事件；-->
  <div class="inner" @click.self="div1Handler">
    <input type="button" value="点击2" @click="btnHandler">
  </div>

</template>

<style scoped>
.inner {
  height: 150px;
  background-color: gold;
}

.outer {
  padding: 40px;
  background-color: red;
}
</style>